<template>
    <div class="left-item">
        <div class="flex p-l-14">
            <div class="sjzt-row">
                <div class="sjtz-title dp4-title-bg">
                    事件状态占比分析
                </div>
                <div class="sjtz-content">
                    <img src="../../assets/dp4/sjztfx-bg.png" alt="">
                    <ul class="sjtz-ul">
                        <li v-for="(item,index) in sjztList" :key="index">
                            <div>{{item.name}}</div>
                            <div class="sjtz-num">{{item.statusCount}}/{{item.total}}</div>
                            <div class="sjtz-ratio">{{item.ratio}}</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="sjlx-row">
                <div class="sjlx-title dp4-title-bg">
                    事件类型分析
                </div>
                <div class="sjlx-content">
                    <div v-for="(item,index) in sjlxList" :key="index" class="sjlx-list">
                        <div class="sjlx-label">{{item.label}}</div>
                        <div class="pro-bg">
                            <div class="curr-pro" :style="{'width':item.width}"></div>
                            <div class="sjlx-num" :style="{'left':item.width}">{{item.num}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sjly-bg">
            <ul class="sjly-left-row">
                <li v-for="(item,index) in sjlyList" :key="index">
                    <div>{{item.name}}</div>
                    <div class="sjly-num">{{item.total}}</div>
                </li>
            </ul>
            <div class="sjly-middle-row">
                <div class="sjly-middle-title dp4-title-bg">
                    事件来源及分布情况
                </div>
                <div class="sjly-middle-num">
                    {{sjlyObj.total}}
                </div>
                <div class="sjly-handle-info">
                    <div class="info-item">
                        <p>未处理</p>
                        <p class="bold">{{sjlyObj.untreated}}</p>
                    </div>
                    <div class="info-item">
                        <p>已处理</p>
                        <p class="bold">{{sjlyObj.treated}}</p>
                    </div>
                </div>
            </div>
            <ul class="sjly-right-row">
                <li v-for="(item,index) in fbqkList" :key="index">
                    <p>{{item.name}}</p>
                    <p>{{item.total}}</p>
                </li>
            </ul>
        </div>
        <div class="left-bottom-item">
            <div class="sjqk-row">
                <div class="dp4-title-bg sjqk-title">
                    各单位事件情况
                </div>
                <ul class="sjqk-ul">
                    <li v-for="(item,index) in sjqkList" :key="index">
                        <div class="outer-circle"></div>
                        <div class="inner-circle">
                            <div class="num-circle">
                                0{{index+1}}
                            </div>
                        </div>
                        <div class="sjqk-label">{{item.name}}</div>
                        <div class="sjqk-num">{{item.total}}</div>
                    </li>
                </ul>
            </div>
            <div class="sjbl-row">
                <div class="dp4-title-bg sjqk-title">
                    事件办理时长分析
                </div>
                <div id="sjblStat">

                </div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from "echarts";

import Pubsub from "../../utils/pubsub";
import {blscOption} from "./statConfig";
import {
    getCountByEventStatus,
    getCountByEventType,
    querySourceAndDistribution,
    getCountByUnit,
    queryEventByHandleTime,
} from "../../config/api";
export default {
    data() {
        return {
            commonRequest: {
                type: ""
            },
            sjztList: [
                //事件状态占比分析
                { name: "待办事件", statusCount: 0, total: 0, ratio: 0 },
                { name: "接收事件", statusCount: 0, total: 0, ratio: 0 },
                { name: "分拣事件", statusCount: 0, total: 0, ratio: 0 },
                { name: "在办事件", statusCount: 0, total: 0, ratio: 0 },
                { name: "办结事件", statusCount: 0, total: 0, ratio: 0 }
            ],
            sjlxList: [
                //事件类型占比分析
                ],
            sjlyList: [
                //事件来源
             
            ],
            sjlyObj:{
                total:0,
                untreated:0,
                treated:0,
            },
            fbqkList: [
                //事件分布情况
            ],
            sjqkList: [
                //事件情况
             
            ]
        };
    },
    mounted(){
        this.pubsub_token1 = Pubsub.subscribe("refreshDpData", (t, args) => {
            let { type } = args;
            this.commonRequest.type = type;
            this.initData();
        });
        this.initData();
        this.initStat();
    },
    destroyed(){
        this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);
    },
    methods:{
         /**
         * 初始化echarts
         */
        initStat() {
            this.myChart1 = echarts.init(document.getElementById("sjblStat"));
            this.myChart1.setOption(blscOption());
        },
        initData(){
            this.getCountStatus();//事件状态占比分析
            this.getCountByEventType();//事件类型分析
            this.getSourceAndDistribution();//事件来源及分布情况
            this.getCountByUnit();//各单位事件情况
            this.queryEventByHandleTime();//事件办理时长
        },
        /**
         * 事件状态占比分析
         */
        getCountStatus(){
            getCountByEventStatus(this.commonRequest).then((result)=>{
                let arr = [];
                let data = result.data || [];
                data.map((item,index)=>{
                    Object.assign(this.sjztList[index],item);
                });
            })
        },
        /**
         * 事件类型分析
         */
        getCountByEventType(){
            getCountByEventType(this.commonRequest).then((result)=>{
                let data = result.data || [];
                let arr = [];
                data.map((item)=>{
                    let width = item.total/100>=1?"100%":`${item.total}%`;
                    arr.push({
                        label:item.name,
                        num:item.total,
                        width,
                    })
                });
                this.sjlxList = arr;
            })
        },
        /**
         * 事件来源及分布情况
         */
        getSourceAndDistribution(){
            querySourceAndDistribution(this.commonRequest).then((result)=>{
                let data = result.data || {};
                let {area = [],source = []} = data;
                this.fbqkList = area;
                let s1 = source.slice(0,4);
                this.sjlyList = s1;
                let o1 = source[4] || {};
                let o2 = source[5] || {};
                let o3 = source[6] || {};
                this.sjlyObj.total = o1.total;
                this.sjlyObj.untreated = o2.total;
                this.sjlyObj.treated = o3.total;
            })
        },
        /**
         * 各单位事件情况
         */
        getCountByUnit(){
            getCountByUnit(this.commonRequest).then((result)=>{
                let data = result.data || [];
                this.sjqkList = data;
            })
        },
        /**
         * 事件办理时长分析
         */
        queryEventByHandleTime(){
            queryEventByHandleTime(this.commonRequest).then((result)=>{
                let data = result.data || {};
                let d = data.data;
                let series = [{data:d}];
                this.myChart1.setOption({
                    series
                });
            })
        },
    }
};
</script>

<style lang="scss" scoped>
@import "../../css/dpCommon.scss";
.p-l-14 {
    padding-left: 14px;
}
.bold {
    font-weight: bold;
}
.left-item {
    box-sizing: border-box;
    width: 840px;
    padding-top: 100px;
}
.sjzt-row {
    width: 365px;
    .sjtz-title {
        width: 175px;
    }
    .sjtz-content {
        margin-top: 12px;
        display: flex;
        align-items: center;
    }
    .sjtz-ul {
        margin-left: 12px;
        li {
            display: flex;
            align-items: center;
            // font-size: 12px;
            color: #73ffff;
            margin-bottom: 6px;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    .sjtz-num {
        width: 80px;
        text-align: right;
        margin-right: 15px;
        font-size: 14px;
        color: #fff;
    }
    .sjtz-ratio {
        width: 38px;
        text-align: right;
    }
}
.sjlx-row {
    width: 461px;
    .sjlx-title {
        width: 154px;
    }
    .sjlx-content {
        display: flex;
        flex-wrap: wrap;
        padding-top: 5px;
        .sjlx-list {
            width: 50%;
            display: flex;
            align-items: center;
            color: #57fffd;
            margin-top: 6px;
        }
        .sjlx-label {
            width: 70px;
        }
        .pro-bg {
            width: 120px;
            position: relative;
            display: flex;
            align-items: center;
            .curr-pro {
                // width: 20%;
                height: 2px;
                background-image: linear-gradient(90deg, #000 0%, #57fffd 100%);
                border-radius: 1px;
            }
            .sjlx-num {
                position: absolute;
                // left: 20%;
                margin-left: 10px;
            }
        }
    }
}
.sjly-bg {
    display: flex;
    width: 840px;
    height: 300px;
    background: url("../../assets/dp4/sjly-bg.png");
    background-size: 100% 100%;
    margin-top: 20px;
    position: relative;
    padding-left: 50px;
    box-sizing: border-box;
    .sjly-left-row {
        li {
            height: 72px;
            width: 79px;
            text-align: center;
            font-size: 12px;
            padding-top: 3px;
            .sjly-num {
                font-size: 14px;
                font-weight: bold;
                margin-top: 14px;
            }
        }
    }
    .sjly-middle-row {
        margin-left: 23px;
        position: relative;
        height: 300px;
        width: 283px;
        .sjly-middle-title {
            width: 175px;
            margin-top: 40px;
        }
        .sjly-middle-num {
            width: 191px;
            margin-top: 49px;
            text-align: center;
            font-weight: bold;
        }
        .sjly-handle-info {
            position: absolute;
            right: 42px;
            top: 108px;
            font-size: 12px;
            .info-item {
                width: 50px;
                height: 30px;
                text-align: center;
                background: rgba(0, 0, 0, 0.5);
                p {
                    height: 14px;
                }
                &:last-child {
                    margin-top: 13px;
                }
            }
        }
    }
}
.sjly-right-row {
    width: 283px;
    margin-top: 70px;
    display: flex;
    flex-wrap: wrap;
    height: 0;
    li {
        width: 33.3%;
        height: 54px;
        text-align: center;
        font-size: 12px;
        p {
            &:first-child {
                margin: 6px 0 10px 0;
            }
            &:last-child {
                font-weight: bold;
            }
        }
    }
}
.left-bottom-item {
    display: flex;
    padding-left: 14px;
    box-sizing: border-box;
    margin-top: 8px;
    .sjqk-row {
        width: 364px;
    }
    .sjqk-title {
        width: 154px;
    }
    .sjqk-ul {
        padding-left: 20px;
        li {
            width: 100%;
            height: 36px;
            margin-top: 10px;
            background-image: linear-gradient(
                90deg,
                rgba(31, 82, 91, 1) 0%,
                rgba(31, 82, 91, 0) 100%
            );
            position: relative;
            display: flex;
            align-items: center;
        }
        .outer-circle {
            position: absolute;
            left: -15px;
            top: -4px;
            height: 46px;
            width: 36px;
            background: #041821;
            border-radius: 50%;
        }
        .inner-circle {
            position: absolute;
            left: -25px;
            height: 36px;
            width: 36px;
            border-radius: 50%;
            border: 1px solid rgba(87, 255, 253, 0.6);
            box-sizing: border-box;
            padding: 5px;
        }
        .num-circle {
            height: 100%;
            width: 100%;
            background-color: #1f525b;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .sjqk-label {
            margin-left: 60px;
        }
        .sjqk-num {
            margin-left: 40px;
            font-size: 16px;
            font-weight: bold;
        }
    }
    .sjbl-row{
        flex:1;
    }
    #sjblStat{
        height:220px;
        width:450px;
    }
}
</style>